<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Title</title>
    <style>
      .outer{
          height: 120px;
          width: 200px;
          border: 1px solid #999;
      }

      .success{
          border: 1px solid #999;
          width: 400px;
          height: 300px;
          background-color: red;
      }
    </style>
</head>
<body>
  <button type="button" onclick="change()">修改样式</button>
  <div class="outer"></div>
  <script>
      function change(){
          let outer = document.getElementsByClassName("outer")[0];
          //直接在此处写css代码 - css代码和js代码耦合在一起
          // outer.style.width=400+"px";
          // outer.style.height=300+"px";
          // outer.style.backgroundColor="green";

          //修改class属性值
          outer.className="success";

      }
  </script>
</body>
</html>